<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>员工管理</title>
    <link href="../../css/bootstrap.css" rel="stylesheet" >
    <style>
        #app{
            padding:10px;
        }
    </style>
</head>
<body>

<div id="app">

    <button class="btn btn-primary" @click="openAdd" >新增</button>

    <table class="table" style="margin-top:20px;">
        <thead>
            <tr>
                <th>工号</th><th>姓名</th><th>月薪</th><th>入职日期</th><th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="emp in list" :key="emp.e_id" >
                <td>{{emp.e_id}}</td>
                <td>{{emp.e_name}}</td>
                <td>{{emp.e_sal}}</td>
                <td>{{emp.e_date}}</td>
                <td>
                    <button type="button" class="btn btn-link">修改</button>
                    &nbsp;
                    <button type="button" class="btn btn-link">删除</button>
                </td>
            </tr>
        </tbody>
    </table>


   <!--新增窗口-->
    <div id="add-win" style="display:none;padding:15px;">
        <!--新增窗口内容-->

        <form>
            <div class="mb-3">
                <label class="form-label">工号</label>
                <input type="text" class="form-control" v-model="emp.e_id"  >
            </div>

            <div class="mb-3">
                <label class="form-label">姓名</label>
                <input type="text" class="form-control" v-model="emp.e_name"  >
            </div>

            <div class="mb-3">
                <label class="form-label">月薪</label>
                <input type="number" class="form-control" v-model="emp.e_sal"  >
            </div>

            <div class="mb-3">
                <label class="form-label">入职日期</label>
                <input type="date" class="form-control" v-model="emp.e_date"  >
            </div>

            <button type="button" class="btn btn-primary" @click="execAdd" >提交</button>
        </form>
    </div>


</div>

<script src="../../layer/jquery-3.6.0.min.js"></script>
<script src="../../layer/layer.js"></script>

<script src="../../js/bootstrap.bundle.min.js"></script>
<script src="../../js/vue.global.js"></script>
<script src="../../js/axios.min.js"></script>
<script src="../../js/wendu.js"></script>
<script>
const app = {
    setup(){

        //员工清单
        const list = Vue.ref([]);

        const getList = ()=>{
            axios.get('/emp')
                .then((response)=>{
                    console.log(response);
                    const result = response.data;
                    list.value = result.data;

                })
                .catch(function (error) {
                    console.log(error);
                });
        };

        getList();

        //删除
        const deleteEmp = (id)=>{
            axios.delete('/emp/'+id)
                .then(response=>{
                    const result = response.data;
                    if(result.success){
                        getList();
                        alert("删除成功！");
                    }else{
                        alert("删除失败！");
                    }

                })
        };

        //新增
        //reactive也是一个响应式包装函数，适合于包装复杂对象
        const emp = Vue.reactive({
            e_id:'',
            e_name:'',
            e_sal:'',
            e_date:''
        });


        const addIdx = Vue.ref(null);//窗口标志
        const openAdd = ()=>{
           addIdx.value = layer.open({
                type: 1,
                title:'新增员工',
                content: $('#add-win'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                area: ['800px', '600px']


            });
        };

        const execAdd = ()=>{

            axios.post('/emp',emp).then(response=>{
                const result = response.data;
                if(result.success){
                    layer.close(addIdx.value);
                    getList();//刷新数据
                    layer.alert('新增员工成功！', {icon: 1});
                }else{
                    layer.alert('新增员工失败！', {icon: 2});
                }
            })
        };


        return {
            list,//只有写在return中的数据才能和视图产生响应式绑定
            getList,
            deleteEmp,
            emp,
            openAdd,
            execAdd,
        };
    }
};

Vue.createApp(app).mount('#app');


</script>

</body>
</html>